<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-section" @click="goToProfile">
			<view class="user-avatar">
				<text class="avatar-icon">👤</text>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo?.realName || userInfo?.username || '用户' }}</text>
				<text class="user-role">{{ getUserTypeText(userInfo?.userType) }}</text>
			</view>
			<text class="arrow">></text>
		</view>
		
		<!-- 设置选项 -->
		<view class="settings-section">
			<view class="section-title">系统设置</view>
			<view class="setting-item" @click="showDeviceSettings">
				<text class="setting-icon">⚙️</text>
				<text class="setting-text">设备管理</text>
				<text class="arrow">></text>
			</view>
			<view class="setting-item" @click="showAlertSettings">
				<text class="setting-icon">🔔</text>
				<text class="setting-text">告警设置</text>
				<text class="arrow">></text>
			</view>
			<view class="setting-item" @click="showDataSettings">
				<text class="setting-icon">📊</text>
				<text class="setting-text">数据设置</text>
				<text class="arrow">></text>
			</view>
		</view>
		
		<!-- 通知设置 -->
		<view class="settings-section">
			<view class="section-title">通知设置</view>
			<view class="setting-item">
				<text class="setting-icon">🔔</text>
				<text class="setting-text">推送通知</text>
				<switch :checked="notificationSettings.push" @change="onPushChange" color="#007aff"></switch>
			</view>
			<view class="setting-item">
				<text class="setting-icon">🔊</text>
				<text class="setting-text">声音提醒</text>
				<switch :checked="notificationSettings.sound" @change="onSoundChange" color="#007aff"></switch>
			</view>
			<view class="setting-item">
				<text class="setting-icon">📳</text>
				<text class="setting-text">震动提醒</text>
				<switch :checked="notificationSettings.vibration" @change="onVibrationChange" color="#007aff"></switch>
			</view>
		</view>
		
		<!-- 系统信息 -->
		<view class="settings-section">
			<view class="section-title">系统信息</view>
			<view class="info-item">
				<text class="info-label">应用版本</text>
				<text class="info-value">v1.0.0</text>
			</view>
			<view class="info-item">
				<text class="info-label">数据库版本</text>
				<text class="info-value">v2.1.3</text>
			</view>
			<view class="info-item">
				<text class="info-label">最后更新</text>
				<text class="info-value">2024-01-15</text>
			</view>
			<view class="info-item">
				<text class="info-label">设备数量</text>
				<text class="info-value">{{ systemInfo.deviceCount }}台</text>
			</view>
			<view class="info-item">
				<text class="info-label">在线设备</text>
				<text class="info-value online">{{ systemInfo.onlineCount }}台</text>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-section">
			<button class="btn-primary" @click="exportData">导出数据</button>
			<button class="btn-secondary" @click="clearCache">清除缓存</button>
			<button class="btn-danger" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useUserStore } from '@/stores/user.js'

// 使用用户状态管理
const userStore = useUserStore()

// 获取用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 响应式数据
const notificationSettings = ref({
	push: true,
	sound: true,
	vibration: true
})

const systemInfo = ref({
	deviceCount: 18,
	onlineCount: 15,
	offlineCount: 2,
	faultCount: 1
})

onMounted(() => {
	loadSettings()
})

// 加载设置
const loadSettings = () => {
	console.log('加载系统设置...')
}

// 显示设备设置
const showDeviceSettings = () => {
    uni.navigateTo({
        url: '/pages/device/device'
    })
}

// 显示告警设置
const showAlertSettings = () => {
	uni.showModal({
		title: '告警设置',
		content: '告警设置功能开发中...',
		showCancel: false
	})
}

// 显示数据设置
const showDataSettings = () => {
	uni.showModal({
		title: '数据设置',
		content: '数据设置功能开发中...',
		showCancel: false
	})
}

// 推送通知开关
const onPushChange = (e) => {
	notificationSettings.value.push = e.detail.value
	uni.showToast({
		title: e.detail.value ? '已开启推送' : '已关闭推送',
		icon: 'none'
	})
}

// 声音提醒开关
const onSoundChange = (e) => {
	notificationSettings.value.sound = e.detail.value
	uni.showToast({
		title: e.detail.value ? '已开启声音' : '已关闭声音',
		icon: 'none'
	})
}

// 震动提醒开关
const onVibrationChange = (e) => {
	notificationSettings.value.vibration = e.detail.value
	uni.showToast({
		title: e.detail.value ? '已开启震动' : '已关闭震动',
		icon: 'none'
	})
}

// 导出数据
const exportData = () => {
	uni.showModal({
		title: '导出数据',
		content: '确定要导出所有数据吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({ title: '导出中...' })
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({ title: '导出成功', icon: 'success' })
				}, 2000)
			}
		}
	})
}

// 清除缓存
const clearCache = () => {
	uni.showModal({
		title: '清除缓存',
		content: '确定要清除所有缓存数据吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({ title: '清除中...' })
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({ title: '清除成功', icon: 'success' })
				}, 1000)
			}
		}
	})
}

// 获取用户类型文本
const getUserTypeText = (userType) => {
	const typeMap = {
		1: '管理员',
		2: '政府用户',
		3: '普通用户'
	}
	return typeMap[userType] || '普通用户'
}

// 跳转到个人资料
const goToProfile = () => {
	uni.navigateTo({
		url: '/pages/profile/profile'
	})
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				userStore.logout()
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background: linear-gradient(135deg, #f8fffe 0%, #e8f5f0 100%);
	min-height: 100vh;
}

.user-section {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2rpx solid #e8f5e8;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.1);
}

.user-avatar {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #2E7D32, #4CAF50);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.3);
}

.avatar-icon {
	font-size: 32rpx;
	color: #ffffff;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 5rpx;
	display: block;
}

.user-role {
	font-size: 22rpx;
	color: #666;
}

.settings-section {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2rpx solid #e8f5e8;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.1);
}

.section-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.setting-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.setting-text {
	flex: 1;
	font-size: 26rpx;
	color: #333;
	margin-left: 20rpx;
}

.setting-icon {
	font-size: 32rpx;
	margin-right: 20rpx;
}

.arrow {
	font-size: 24rpx;
	color: #ccc;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.info-label {
	font-size: 26rpx;
	color: #333;
}

.info-value {
	font-size: 24rpx;
	color: #666;
	
	&.online {
		color: #4cd964;
	}
}

.action-section {
	padding: 20rpx 0;
}

.btn-primary, .btn-secondary, .btn-danger {
	width: 100%;
	height: 80rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	margin-bottom: 20rpx;
	border: none;
}

.btn-primary {
	background-color: #007aff;
	color: #ffffff;
}

.btn-secondary {
	background-color: #f8f9fa;
	color: #333;
}

.btn-danger {
	background-color: #dd524d;
	color: #ffffff;
}
</style>
